body {
  background: #e0e5ec;
}
h1 {
  position: relative;
  text-align: center;
  color: #353535;
  font-size: 50px;
  font-family: "Cormorant Garamond", serif;
}

p {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  text-align: center;
  font-size: 18px;
  color: #676767;
}
.frame {
  width: 100%;

  text-align: center;
}

.custom-btn {
  width: 190px;
  height: 60px;
  color: #fff;

  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;

}

/* 1 */




/* 15 */
.btn-15 {

  border: none;
  z-index: 1;
  
  
  border:1px solid #366385;
  
  
}
.btn-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #18acfa;
    /* Old browsers */
    background: -moz-linear-gradient(left, #18acfa 0%, #13b7d3 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #18acfa 0%,#13b7d3 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #18acfa 0%,#13b7d3 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18acfa', endColorstr='#13b7d3',GradientType=1 );
    /* IE6-9 */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;

    width: 0;
  
  border-radius: 0px;
 
  transition: all 0.8s ease;
}
.btn-15:hover {
  color: #fff;
}
.btn-15:hover:after {
  left: 0;
  width: 100%;
}
.btn-15:active {
  
}















/* 50 */
.btn-50 {

  border: none;
  z-index: 1;
  
  
  border:1px solid #ccc;
  
  
}
.btn-50:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #18acfa;
    /* Old browsers */
    background: -moz-linear-gradient(left, #18acfa 0%, #13b7d3 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #18acfa 0%,#13b7d3 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #18acfa 0%,#13b7d3 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18acfa', endColorstr='#13b7d3',GradientType=1 );
    /* IE6-9 */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;

    width: 0;
  
  border-radius: 0px;
 
  transition: all 0.8s ease;
}
.btn-50:hover {
  color: #fff;
}
.btn-50:hover:after {
  left: 0;
  width: 100%;
}
.btn-50:active {
  
}